<template>
	<view class="movieStyle">
		<!--  bgcolor="#FD9031"  -->
		<title :center="false" title="影院" iconSize="38" bgcolor="linear-gradient(45deg, #f43f3b, #ec008c)" color="#FFF"
		 @to-click="toBack(1)"></title>
		<view class="movie_top" :style="{'padding-top': height * 1.5 + 100 + 'rpx'}">
			<!-- 定位和搜索盒子 start -->
			<view class="movie_top_address">
				<navigator url="/subpages/city/city" class="index-area">
					<text class="overflow">{{locCity.nm}}</text>
					<u-icon name="arrow-down-fill" color="#595C59" size="12"></u-icon>
				</navigator>
				<u-search class="search-form" placeholder="搜索影院" :clearabled="true" :show-action="false"
				 v-model="condition.keyword" @change="searchCinema"></u-search>
			</view>
			<!-- 定位和搜索盒子 end -->

			<!-- 条件盒子 start -->
			<view class="dropbox">
				<dropdown-group :list="searchData" @change="changeType"></dropdown-group>
			</view>
			<!-- 条件盒子 end -->
		</view>
		<!-- 影院列表盒子 start -->
		<scroll-view scroll-y="true" class="cinema-list-box" :style="{height: boxHeight + 'px'}" :refresher-enabled="triggered"
		 :refresher-triggered="freshing" refresher-enabled @refresherrefresh="refresh" @scrolltolower="onreachBottom">
			<cineme-group :list="cinemaList" @click="movie_tiao"></cineme-group>
		</scroll-view>
		<!-- 影院列表盒子 end -->
	</view>
</template>

<script>
	import title from '@/pages/components/title.vue'
	import dropdown from '@/pages/components/dropdown/u-dropdown.vue'
	import dropdownItem from '@/pages/components/dropdown/u-dropdown-item.vue'
	import cinemeGroup from '@/pages/components/cinema/cinema-group.vue'
	import dropdownGroup from '@/pages/components/public/dropdown-group.vue'
	export default {
		data() {
			return {
				height: 0,
				boxHeight: 0,
				// 下拉刷新
				triggered: false,
				freshing: false,
				loading: false,
				loaded: false,
				//筛选条件
				condition: {
					value1: '0',
					value2: '',
					value3: 'distance',
					page: 0,
					pagesize: 20,
					keyword: '',
				},
				timeCurrent: 0,
				chooseData: {
					city: '全城',
					brand: '品牌',
					distance: '离我最近',
				},
				searchData: {
					city: [], //城市
					brand: [ // 品牌
						{
							label: "品牌",
							value: ""
						}, {
							label: "万达影院",
							value: "万达"
						}, {
							label: "大地影院",
							value: "大地"
						}, {
							label: "卢米埃影院",
							value: "卢米埃"
						}, {
							label: "幸福蓝海影院",
							value: "幸福蓝海"
						}, {
							label: "横店影城",
							value: "横店"
						}, {
							label: "中影国际影城",
							value: "中影"
						}, {
							label: "金逸影城",
							value: "金逸"
						}, {
							label: "博纳影城",
							value: "博纳"
						}, {
							label: "CGV影城",
							value: "CGV"
						}, {
							label: "UME国际影城",
							value: "UME"
						}
					],
					distance: [ //距离
						{
							label: "离我最近",
							value: "distance"
						}, {
							label: "折扣最低",
							value: "discount"
						}, {
							label: "价格最低",
							value: "price"
						},
					]
				},
				// 影院列表
				cinemaList: [],
			}
		},
		computed: {
			locCity: {
				get() {
					return this.$store.state.chooseLoc || {nm: '城市'}
				},
				set(val) {}
			}
		},
		components: {
			title,
			dropdown,
			dropdownItem,
			cinemeGroup,
			dropdownGroup
		},
		onShow() {
			this.$nextTick(() => {
				this.height = this.$common.setWidthHeight(() => {
					this.getDom()
				})
			})
			if(this.$store.state.chooseLoc.id || this.$store.state.locCity.id) {
				this.getRegion()
			}
		},
		methods: {
			// 电影跳转
			movie_tiao(item) {
				uni.navigateTo({
					url: `/subpages/buymovie/buymovie?cid=${item.cid}&cinemaId=${item.cinemaid}&mid=${-1}&dates=${this.$options.filters['formateDate'](new Date, 'YYYY-MM-DD')}`
				})
			},
			//设置盒子高度
			getDom() { 
				let query = uni.createSelectorQuery().in(this)
				query.selectAll('.movie_top').boundingClientRect(res => {
					let height = res[0] ? res[0].height : 0
					this.boxHeight = (this.$store.state.windowHeight - height)
				}).exec()
			}, 
			// 下拉刷新事件
			refresh(freshing = null) {
				if (freshing) {
					this.freshing = true
				}
				this.loaded = false
				this.condition.page = 0
				this.cinemaList = []
				uni.showLoading({
					title: '加载中'
				})
				this.getCinema()
			},
			//触底事件
			onreachBottom() { 
				if(!this.loaded) {
					uni.showLoading({
						title: '加载中'
					})
					this.getCinema()
				}
			},
			// 搜索影院
			searchCinema() {
				this.$common.inputDebounce(this, () => {
					this.refresh()
				})
			},
			// 条件选择
			changeType(data) {
				this.condition = {...this.condition, ...data}
				this.refresh()
			},
			// 获取地区数据
			getRegion() {
				uni.showLoading({
					title: '加载中'
				})
				this.$api.getRegion({
					cid: this.$store.state.chooseLoc.id || this.$store.state.locCity.id
				}).then(res => {
					this.searchData.city = res.data.data
					this.searchData.city.unshift({
						cid: this.$store.state.chooseLoc.id || this.$store.state.locCity.id,
						id: 0,
						name: "全城",
						rid: 0,
					})
					let list = JSON.stringify(this.searchData.city)
					list = list.replace(/rid/g, 'value')
					list = list.replace(/name/g, 'label')
					this.searchData.city = JSON.parse(list)
					this.refresh()
				})
			},
			// 获取电影院列表
			getCinema() {
				this.loading = true
				let list = {
					cid: this.$store.state.chooseLoc.id || this.$store.state.locCity.id,
					lat: this.$store.state.locCity.lat,
					lng: this.$store.state.locCity.lng,
					s: this.condition.keyword,
					rid: this.condition.value1,
					cinemaTitle: this.condition.value2,
					orders: this.condition.value3,
					offset: this.condition.page * this.condition.pagesize,
					limit: this.condition.pagesize
				}
				this.$api.getCinema(list).then(res => {
					let data = res.data.data
					data.list.rows.forEach((item, index) => {
						if (typeof data.list.rows[index].hall_type == 'string') {
								item.hall_type = item.hall_type.length > 0 ? item.hall_type.split(',') : []
						}
					})
					this.cinemaList.push(...data.list.rows)
					this.total = data.list.total
					this.freshing = false
					this.loading = false
					uni.hideLoading()
					if(this.total <= this.condition.page * this.condition.pagesize) {
						this.loaded = true
					}
					this.condition.page += 1
				})
			},
		},
		watch: {
			'$store.state.chooseLoc'(val) {
				this.locCity = val
				this.getRegion()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.movieStyle {
		max-height: 100vh;
		overflow: hidden;
		.movie_top {
			padding-top: 80rpx;

			.movie_top_address {
				min-height: 100rpx;
				display: flex;
				align-items: center;
				padding: 0 30rpx;

				// justify-content: space-between;
				.index-area {
					font-size: 28rpx;
					display: flex;
					align-items: center;

					u-icon {
						margin-left: 8rpx;
						margin-bottom: 6rpx;
					}
				}

				.search-form {
					margin-left: 50rpx;
					flex: 1;
				}
			}

			/deep/.u-dropdown__menu {
				.u-dropdown__menu__item {
					position: relative;
					padding: 0 20rpx;

					.u-flex {
						flex: 1;
						display: flex;
						justify-content: center;

						.u-dropdown__menu__item__text {
							margin-right: 20rpx;
						}
					}

					&::after {
						content: " ";
						position: absolute;
						width: 2rpx;
						top: 20rpx;
						bottom: 20rpx;
						right: 0;
						background: rgba(0, 0, 0, .1);
					}

					&:last-of-type {
						&::after {
							content: unset;
						}
					}

					&:nth-of-type(2) {
						flex: 1.2;
					}

					.u-icon__icon {
						color: #666;
					}
				}
			}

			/deep/.u-dropdown-item {
				.u-dropdown-item__options {
					border-top: 2rpx solid #ebedf0;
				}
			}

			/deep/.u-cell {
				font-size: 28rpx !important;
				padding: 24rpx 30rpx !important;
				display: flex !important;
				color: #666 !important;
				justify-content: space-between !important;
				line-height: unset;
			}
		}

		.cinema-list-box {
			.cinema-info-group {
				.cinema-info-item {
					padding: 20rpx 25rpx;
					border-bottom: 2rpx solid rgba(0, 0, 0, .05);

					.cinema-top-box {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.cinema-name-text {
							font-size: 30rpx;
							color: #333;
						}

						.cinema-money-box {
							font-size: 24rpx;
							color: #999;
							display: flex;
							align-items: center;

							text {
								font-size: 30rpx;
								color: #f1255d;
								margin-right: 10rpx;

								// font-weight: bold;
								&::before {
									content: '￥';
									font-size: 80%;
									margin-right: 4rpx;
								}
							}
						}
					}

					.cinema-address-box {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 20rpx;

						text {
							font-size: 24rpx;
							color: #999;
						}
					}

					.tag-list-box {
						margin-top: 20rpx;
					}
				}
			}

			.none-cinema-box {
				image {
					margin-top: 150rpx;
					width: 100%;
				}

				view {
					text-align: center;
					margin-top: 40rpx;
					font-size: 32rpx;
					color: #666;
				}
			}
		}
	}
</style>
